<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>PC视频通话</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
iframe{
	border: none;
}
</style>
</head>
<body style="overflow: hidden;">
	
	<!-- <div style="position: absolute; width: 50%; height: 100%; top: 0;left: 0;">
		<iframe id="targetIfi" style="width: 100%; height: 100%;"></iframe>
	</div> -->
	<div style="position: absolute; width: 50%; height: 100%; top: 0;left: 0;">
		<iframe id="displayIfi" style="width: 100%; height: 100%;"></iframe>
	</div>
	<div style="position: absolute; width: calc(50% - 20px); height: 100%; right: 0; top: 0;">
		<div style="height: 10%; width: 100%;">
			<p>我的ID:<span id="myId"></span></p>
			<p>远程ID:<input type="text" id="targetId" placeholder="TARGET ID"/></p>
			<button id="open">开始通话</button>
			<button id="openDisplay">共享屏幕</button>
		</div>
		<div style="height:calc(90% - 30px); width: 100%;">
			<iframe id="myIfi" style="width: 100%; height: 100%;"></iframe>
		</div>
		<div style="position: absolute;width: 50%; height: 50%">
			<video id="disvideo" autoplay="autoplay" muted></video>
		</div>
	</div>
</body>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/lib/layer/layer.js" charset="utf-8"></script>
<script src="/static/js/stomp.js" type="text/javascript"></script>
<script src="/static/js/websocket.js" type="text/javascript"></script>
<script src="/static/js/display.js" type="text/javascript"></script>
<script type="text/javascript">
	if(!IsPC()){
		window.location.href="/deerim/mobileim";
	}

	var number=parseInt(Math.random() * (9999 - 1000 + 1) + 1000); 
	$("#myId").html(number);
	
	$("#open").click(function(){
		websocket.send("/topic/chat"+$("#targetId").val(),JSON.stringify({command:"request","id":number}));
	});
	
	$("#openDisplay").click(function(){
		displayStream.displayMedia("/topic/userId-"+$("#targetId").val());
		websocket.send("/topic/chat"+$("#targetId").val(),JSON.stringify({command:"display","id":number}));
	});
	
	$("#myIfi").attr("src","collection?id="+number);
	
	function init(w){
		w.subscribe("/topic/chat"+number,function(msg){
			var data=JSON.parse(msg.body);
			console.log(data);
			switch(data.command){
				case "request":
					layer.open({
	            	    content: '用户'+data.id+"请求视频通话",
	            	    shadeClose:false,
	            	    btn: ['接收', '拒绝'],
	            	    btn1: function(index){
	            	    	//发送同意请求
	            	    	websocket.send("/topic/chat"+data.id,JSON.stringify({"command":"receive","id":number}));
	            	    	//接收显示对方的视频
	            	    	$("#targetIfi").attr("src","show?id="+data.id+"&type=im");
	            	    	layer.close(index); 
	            	    },
		            	btn2: function(index){
		            		websocket.send("/topic/chat"+data.id,JSON.stringify({"command":"noReceive"}));
		        	    }
	            	});
					break;
				case "receive":
					// 返回显示对方视频
					$("#targetIfi").attr("src","show?id="+data.id+"&type=im");
					break;
				case "noReceive":
					layer.msg('对方拒绝');
					break;
				case "display":
					$("#displayIfi").attr("src","show?id="+data.id+"&type=display");
					break;
			}
		});
	}
	
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
</script>
</html>